<template>
  <div style=" background-color: #F5F6FA;">
    <!-- <hear></hear> -->
    <BDhear :num="2"></BDhear>
    <div style="background-color: #ffffff;">
    <div style="display: flex;" class="order_details_box">
        <div style="flex:1;padding:30px;padding-top:8px;">
      <div style="">
          <div class="fl money cioasdasd" style="padding-top:8px;margin-left:0px;" >
          <div style="color:#FF184E;font-size:28px;font-weight:Bold;">￥{{margin_amount}}</div>
        </div>
        <div style="padding-top:8px;margin-left:0px;" class="font_style">标段编号：{{bidding_name}}</div>
        <div style="padding-top:8px;margin-left:0px;" class="font_style">标段名称：{{bidding_project_name}}</div>
          <div  v-if="!toubiao" style="padding-top:8px;margin-left:0px;" class="font_style">开标时间：{{bidder_notice_time}}</div>
         <div  v-else style="padding-top:8px;margin-left:0px;" class="font_style">招标时间：{{bid_begin_time | dateFormat}}——{{bid_end_time | dateFormat}}</div>
    
        </div> 
        </div>
      <div v-if="toubiao" style="flex:1;font-size: 17px;display: flex; padding:30px;padding-top:8px;   padding-left: 10px;
    border-left: 3px solid #ffff;" >
        出函类型
   <div style="display: flex;
    align-items: center;">
          <el-radio v-model="radio1" label="1" border>电子保函</el-radio>
    <el-radio v-model="radio1" label="2" border>纸质保函</el-radio>
   </div>
      </div>
    </div>
      <!-- <div class="fl money_box">
        <div class="bank_box" v-for="(item, index) in BankIconList" :key="index">
          <div class="bank_icon">
            <img style="  width: 194px;height: 194px;" src="../../assets/BidSecurity/bank_Icon.png" />
          </div>
          <div>{{item.guarantee_company_name}}</div>
          <div class="bank_btn">
            <el-button @click="getParams(item)">选择</el-button>
          </div>
        </div>
      </div> -->
  <div style="height: 780px; overflow: auto;">
            <div class="c-div">
         <div
          :class="cutIndex == index ? 'app-cs' : 'app-c'"
          @click="handleMap(index, item)"
          v-for="(item, index) in BankIconList"
          :key="index"
        >
         
          <!-- <div class="c-div"> -->
          <img class="c-img" :src="'http://192.168.0.28:8082'+item.guarantee_company_logo" alt="" />
         <div class="c-txt">
            <div class="txt-1">{{ item.guarantee_company_name }}</div>
            <div class="txt-2">类型：{{ item.guarantee_company_type }}</div>
            <div class="txt-3">税率：{{ item.guarantee_company_rate }}</div>
            <!-- <div class="txt-4">{{ item.guarantee_company_desc }}</div> -->
          </div>
            <el-button style="    margin-top: 0.75rem;width: 33%;" type="primary" plain>选择</el-button>
        </div>
      </div>
  </div>
      <div style=" margin-top: 77px;   padding: 0 8%;">
    <div style="width: 100%;margin-top: 2rem; height: 4rem;" >
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[6, 12, 18, 24]"
      :page-size="6"
      layout="total, sizes, prev, pager, next, jumper"
      :total="zongshu">
    </el-pagination>
  </div>
</div>
<el-dialog
class="publicDialog"
  title="当前选择"
  :visible.sync="ssdialogVisible"
  width="30%"
  :close-on-click-modal="false" v-dialogDrag custom-class="publicDialog"
  :before-close="handleClose">
  <div>担保公司：{{luoji.guarantee_company_name}}</div>
  <div v-if="toubiao">出函类型：{{chuhtyle}}</div>
  <span slot="footer" class="dialog-footer footer">
    <el-button @click="ssdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="qweqw">确 定</el-button>
  </span>
</el-dialog>
      <!-- <div class="bank_sataus">
        <el-button @click="SelectLot" class="bank_stauts_btn">上一步</el-button>
        <el-button @click="Submittals" class="bank_stauts_btn">下一步</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import hear from ".././../components/hear.vue";
import BDhear from "./BDhear.vue";
import { getCompany, generate } from "@/api/financialInstitution";
export default {
  components: {
    // hear,
    BDhear
  },
  name: "financialInstitution",
  data() {
    return {
      BankIconList: [],
      params: {}
    };
  },
  created() {},
  mounted() {
    this.get_Company();
  },
  methods: {
    getParams(item) {
     
      console.log(item);
      // this.params.user_id = sessionStorage.getItem("user_id");
      this.params.typeid = sessionStorage.getItem("typeid");
      this.params.projectid = sessionStorage.getItem("proid");
      this.params.companyid = item.guarantee_comid
      // this.params.ga_code = 123456789;
      // this.params.unify_code = item.unify_code;
      // this.params.apply_company_name = sessionStorage.getItem("bidding_name");
      sessionStorage.setItem('guarantee_comid',item.guarantee_comid)
    },
    SelectLot() {
      this.$router.push("/BidSecurity/SelectALot");
    },
    Submittals(item) {
      console.log(this.params);

      generate(this.params).then(res => {
        if (res.data.code == 1) {
          sessionStorage.setItem(
            "guarantee_apply_id",
            res.data.data.guarantee_apply_id
          );
          sessionStorage.setItem("apply_number", res.data.data.apply_number);
          console.log(res.data.data);
          this.$message.success("提交成功");
          this.$router.push("/BidSecurity/Submission");
        }
      });
    },
    get_Company() {
      getCompany().then(res => {
        if (res.data.code == 1) {
          this.BankIconList = res.data.data.rows;
        }
      });
    }
  }
};
</script>

<style scoped>
.bank_stauts_btn {
  width: 175px;
  height: 60px;
}

.bank_sataus {
  width: 370px;
  margin: 60px auto;
}

.bank_btn button {
  width: 144px;
  height: 40px;
  margin-top: 20px;
  /* position: relative;
  top: 0%;
  left: 0%; */
}

.bank_btn {
  /* position: relative;
  top: 7%;
  left: 26%; */
}

.bank_icon {
  margin-top: 7px;
  /* position: relative;
  left: 19%; */
  padding-top: 7px;
}

.bank_box {
  /* width: 23%; */
  flex: 1;
  height: 311px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.money_box {
  width: 100%;
  height: 311px;
  padding: 20px;
  /* position: relative;
  left: 15%;
  top: 71px; */
  /* background: red; */
  display: flex;
  justify-content: space-between;
}

.money {
  align-items: center;
  margin-top: 28px;
  margin-left: 60px;
}

.font_style {
  font-size: 20px;
  color: #333333;
  font-size: Regular;
  margin-top: 28px;
  margin-left: 60px;
}

.order_details_box {
  width: 100%;
  height: 200px;
  background-color: #f5f6fa;
  /* position: relative;
  left: 15%;
  top: 5%; */
}
</style>
